<template>
    <div>
        <el-card shadow="always" :body-style="{ padding: '20px' }">
            <template #header>
                <el-button type="primary" @click="addSpu" :disabled="!categoryId3" v-has="'btn.Spu.add'">添加Spu</el-button>
            </template>
            <el-table border stripe :data="spuList" v-loading="loading">
                <el-table-column type="index" width="80" label="序号" />
                <el-table-column label="SPU名称" prop="spuName" />
                <el-table-column label="SPU描述" prop="description" />
                <el-table-column label="操作">
                    <template v-slot="{ row }">
                        <el-button type="success" size="small" icon="ele-Plus" title="添加sku" @click="addSku(row)" v-has="'btn.Spu.addsku'"></el-button>
                        <el-button type="warning" size="small" icon="ele-Edit" title="修改spu" @click="editSpu(row)" v-has="'btn.Spu.update'"></el-button>
                        <el-button type="info" size="small" icon="ele-InfoFilled" title="查看sku列表" @click="showSkuList(row)" v-has="'btn.Spu.skus'"></el-button>
                        <el-button type="danger" size="small" icon="ele-Delete" title="删除spu" @click="deleteSaleAttr(row.id)" v-has="'btn.Spu.delete'"></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                @current-change="5"
                v-model:currentPage="page"
                :page-sizes="[5, 10, 15, 20]"
                v-model:page-size="pageSize"
                layout=" prev, pager, next, jumper, ->, sizes, total"
                background
                :pager-count="7"
                :total="total"
                :style="{ marginTop: '20px' }"
            ></el-pagination>
            <!-- 查看sku列表对话框 -->
            <el-dialog :before-close="beforeClose" v-model="dialogTableVisible" :title="`${spu.spuName}的sku列表`">
                <el-table v-loading="loading" :data="skuList">
                    <!-- property对应的就是prop -->
                    <el-table-column label="名称" prop="skuName" />
                    <el-table-column label="价格" prop="price" />
                    <el-table-column label="重量" prop="weight" />
                    <el-table-column label="默认图片">
                        <template v-slot="{ row, $index }">
                            <el-image :src="row.skuDefaultImg"></el-image>
                        </template>
                    </el-table-column>
                </el-table>
            </el-dialog>
        </el-card>
    </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
    name: "SpuList",
});
</script>

<script setup lang="ts">
import { ref, watch, watchEffect } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { storeToRefs } from "pinia";
import { useSpuStore } from "@/stores/spu";
import { useCategoryStore } from "@/stores/category";
import type { SpuImageListType, SpuInfoType, SpuSaleAttrListType } from "@/types/spu";
import { reqDeleteSpu } from "@/api/spu";
import type { skuInfoListType } from "@/types/sku";
import { reqSkuList } from "@/api/sku";

const loading = ref(false); // 加载状态
const spuStore = useSpuStore(); // 获取spuStore对象
const categoryStore = useCategoryStore(); // 获取categoryStore对象
const page = ref(1);
const pageSize = ref(5);
// 获取三级列表id
const { categoryId3 } = storeToRefs(categoryStore);
// 获取spu列表和总条数
const { spuList, total } = storeToRefs(spuStore);

// 获取spu列表
const getSpuList = async () => {
    try {
        await spuStore.getSpuList(page.value, pageSize.value, categoryId3.value as number);
        loading.value = false;
    } catch (e: any) {
        ElMessage.error(e.message);
    }
};
// 监听三级分类id变化,如果有,就获取spu列表,如果没有,则清空spu列表
watchEffect(() => {
    if (categoryId3.value) {
        getSpuList();
        loading.value = true;
    } else {
        // 清空spu列表
        spuList.value = [];
        total.value = 0;
    }
});
// 监听page和pageSize变化,如果有,就获取spu列表
watch([page, pageSize], () => {
    getSpuList();
    loading.value = true;
});

// 接收子组件的事件
const emit = defineEmits(["changeShowState"]);
// 点击添加Spu的回调
const addSpu = () => {
    emit("changeShowState", 2);
};
// 点击修改Spu的回调
const editSpu = (row: SpuInfoType) => {
    emit("changeShowState", 2, row);
};
// 点击添加sku的回调
const addSku = (row: SpuInfoType) => {
    emit("changeShowState", 3, row);
};
// 删除表格中的销售属性
const deleteSaleAttr = async (id: number) => {
    try {
        await ElMessageBox.confirm("确定删除吗？", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
        }).then(async () => {
            try {
                await reqDeleteSpu(id);
                ElMessage.success("删除成功");
                await getSpuList();
            } catch (e) {
                ElMessage({
                    type: "error",
                    message: "删除失败",
                });
            }
        });
    } catch (e) {
        ElMessage({
            type: "info",
            message: "你不删除了????",
        });
    }
};
/*
 * @description: 查看sku列表对话框
 * */
const dialogTableVisible = ref(false);
// 定义spu对象和sku列表
const spu = ref({} as SpuInfoType);
const skuList = ref([] as skuInfoListType);
// dialog关闭前的回调
const beforeClose = (done: () => void) => {
    // 重置skuList
    skuList.value = [];
    loading.value = false;
    done();
};
// 点击查看sku列表的回调
const showSkuList = async (row: SpuInfoType) => {
    dialogTableVisible.value = true;
    spu.value = row;
    loading.value = true;
    try {
        skuList.value = await reqSkuList(row.id as number);
        loading.value = false;
    } catch (e: any) {
        ElMessage.error(e.message);
        loading.value = false;
    }
};
</script>

<style scoped></style>
